<template>
  <header>
    <div class="quantitative">
      稿件数量
      <div class="message" v-text="quantitative"></div>
    </div>
    <div class="author">
      作者信息
      <div class="message" v-text="author"></div>
    </div>
    <div class="delist">
      接收稿件
      <div class="message" v-text="delist"></div>
    </div>
    <div class="high-quality">
      拒绝稿件
      <div class="message" v-text="highQuality"></div>
    </div>
  </header>
  <br />
  <h3 style="margin-bottom: 10px">稿件统计</h3>

  <!-- 表格内容 -->
  <el-card>
    <el-table :data="periodicalData" stripe style="width: 100%" fit>
      <el-table-column prop="id" label="序号" align="center" />
      <el-table-column prop="name" label="稿件名" align="center" />
      <el-table-column prop="number" label="稿件编号" align="center" />
      <el-table-column prop="author" label="作者" width="280" align="center" />
      <el-table-column
        prop="periodical"
        label="所属期刊"
        width="280"
        align="center"
      />
      <el-table-column
        prop="keyWords"
        label="关键词"
        width="280"
        align="center"
      />
    </el-table>
    <!-- 分页条 -->
    <el-pagination
      :page-size="20"
      :pager-count="11"
      layout="prev, pager, next"
      :total="1000"
    />
  </el-card>

  <!-- 其余数据展示 -->
  <article>
    <div class="left-part">
      <div>
        <div
          id="wait-for-comment"
          style="width: 100%; height: 100%; margin: 5px"
          ref="chart"
        ></div>
        <div
          id="personnel-to-be-audited"
          style="width: 100%; height: 100%; margin: 5px"
          ref="chart"
        ></div>
      </div>
      <div>
        <div
          id="vip"
          style="width: 100%; height: 100%; margin: 5px"
          ref="chart"
        ></div>
        <div
          id="block-user"
          style="width: 100%; height: 100%; margin: 5px"
          ref="chart"
        ></div>
      </div>
    </div>
    <div class="right-part">
      <div
        id="line-chart"
        style="width: 100%; height: 100%; margin: 5px"
        ref="chart"
      ></div>
    </div>
  </article>
</template>

<script setup>
import { ref } from "vue";
// 主页头部信息
const quantitative = ref("2" + "个");
const author = ref("2" + "位");
const delist = ref("2" + "篇");
const highQuality = ref("0" + "篇");

// 表格操作
const periodicalData = [
  {
    id: "1",
    name: "基于SpringCloud的“芸窗”期刊采编系统",
    number: "CQD",
    author: "陈启迪",
    periodical: "计算机技术",
    keyWords: "期刊采编；敏感词识别；3D看稿",
  },
  {
    id: "2",
    name: "环境治理系统设计",
    number: "ZLM",
    author: "郑丽敏",
    periodical: "环境工程",
    keyWords: "环境治理；环境治理系统；环境治理系统设计",
  },
];

import { onMounted } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  // 待处理稿件
  var waitForComment = echarts.init(
    document.getElementById("wait-for-comment")
  );
  waitForComment.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "0%",
      left: "center",
    },
    series: [
      {
        name: "数据详情",
        type: "pie",
        radius: ["80%", "90%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 25,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        center: ["50%", "55%"],
        data: [
          { value: 1, name: "未处理稿件", itemStyle: { color: "#a8456b" } },
          { value: 3, name: "已处理稿件", itemStyle: { color: "#2e317c" } },
        ],
      },
    ],
  });

  // 待审核作者
  var PersonnelToBeAudited = echarts.init(
    document.getElementById("personnel-to-be-audited")
  );
  PersonnelToBeAudited.setOption({
    tooltip: {
      trigger: "item",
    },

    legend: {
      top: "0%",
      left: "center",
    },
    series: [
      {
        name: "数据详情",
        type: "pie",
        radius: ["80%", "90%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 25,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        center: ["50%", "55%"],
        data: [
          { value: 2, name: "作者数", itemStyle: { color: "#357dd4" } },
          { value: 1, name: "编辑数", itemStyle: { color: "#edc87a" } },
        ],
      },
    ],
  });

  // vip用户
  var vip = echarts.init(document.getElementById("vip"));
  vip.setOption({
    tooltip: {
      trigger: "item",
    },

    legend: {
      top: "0%",
      left: "center",
    },
    series: [
      {
        name: "数据详情",
        type: "pie",
        radius: ["80%", "90%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 25,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        center: ["50%", "55%"],
        data: [
          { value: 3, name: "接收数", itemStyle: { color: "#5ae8e5" } },
          { value: 2, name: "拒绝数", itemStyle: { color: "#63d2a6" } },
        ],
      },
    ],
  });

  // 封禁用户
  var blockUser = echarts.init(document.getElementById("block-user"));
  blockUser.setOption({
    tooltip: {
      trigger: "item",
    },

    legend: {
      top: "0%",
      left: "center",
    },
    series: [
      {
        name: "数据详情",
        type: "pie",
        radius: ["80%", "90%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 25,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        center: ["50%", "55%"],
        data: [
          { value: 0, name: "封禁用户", itemStyle: { color: "#8076a3" } },
          { value: 2, name: "正常用户", itemStyle: { color: "#ef917d" } },
        ],
      },
    ],
  });

  // 折线图数据
  var lineChart = echarts.init(document.getElementById("line-chart"));

  lineChart.setOption({
    title: {
      text: "近七日增长数据",
      left: "10%",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["用户增长", "稿件增长", "编辑增长"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
        magicType: {
          type: ["line", "bar", "stack"],
        },
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "用户增长",
        type: "line",
        stack: "Total",
        data: [1, 1, 1, 1, 1, 2, 2],
        color: "#cc586c",
      },
      {
        name: "稿件增长",
        type: "line",
        stack: "Total",
        data: [0, 1, 1, 1, 1, 1, 2],
        color: "#2cb69c",
      },
      {
        name: "编辑增长",
        type: "line",
        stack: "Total",
        data: [0, 1, 1, 1, 1, 1, 1],
        color: "#2176ac",
      },
    ],
  });

  window.addEventListener("resize", function () {
    waitForComment.resize();
    PersonnelToBeAudited.resize();
    vip.resize();
    blockUser.resize();
    lineChart.resize();
  });
  // dom的结束反括号
});
</script>

<style scoped>
header {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 水平均匀分布 */
  align-items: center; /* 垂直居中 */
  padding: 20px;
}
.quantitative,
.author,
.delist,
.high-quality {
  position: relative;
  height: 80px;
  width: 20%;
  /* margin-right: 5%; */
  background-image: linear-gradient(135deg, #79f1a4 10%, #0e5cad 100%);
  text-align: center;
  font-family: "HongLei";
  font-size: 30px;
  line-height: 60px;
  color: white;
  border-radius: 25px;
  box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.25);
}

.author {
  background-image: linear-gradient(135deg, #ffcf71 10%, #2376dd 100%);
}
.delist {
  background-image: linear-gradient(135deg, #ffaa85 10%, #b3315f 100%);
}
.high-quality {
  background-image: linear-gradient(135deg, #65fdf0 10%, #1d6fa3 100%);
}

.message {
  position: absolute; /* 小盒子绝对定位 */
  top: 70%; /* 垂直靠下 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 细调居中位置 */
  width: 80%; /* 小盒子的宽度 */
  height: 80%; /* 小盒子的高度 */
  text-align: center; /* 文本居中 */
  line-height: 80px; /* 垂直居中文本 */
}

/* 表格样式 */
.el-table {
  box-shadow: h-offset v-offset blur spread color;
}

article {
  display: flex; /* 使用 Flexbox 布局 */
  margin-top: 40px;
  height: 400px;
}

.left-part {
  display: flex; /* 左半部分也使用Flexbox */
  flex-direction: column; /* 子元素垂直排列 */
  width: 40%; /* 占据一半宽度 */
}

.left-part > div {
  /* 左半部分的直接子元素 */
  display: flex; /* 子元素内部使用Flexbox */
  justify-content: space-between; /* 子元素间留空隙 */
  height: 50%;
}

.small-box {
  width: 45%; /* 每个小盒子占据45%的宽度 */
  height: 50%; /* 每个小盒子占据50%的高度 */
  margin: 5px; /* 边距 */
}

.right-part {
  display: flex; /* 右半部分使用Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 60%;
}
</style>
